<template>
  <div class="page-container animate-fade-in">
    <div class="dashboard-header">
      <h1 class="gradient-text">欢迎使用基础服务平台</h1>
      <p class="subtitle">提供银行卡查询和邮件发送等基础服务</p>
    </div>

    <el-row :gutter="24" class="stats-row">
      <el-col :span="8">
        <div class="card-container stat-card">
          <div class="stat-icon">
            <el-icon size="48" color="#667eea">
              <CreditCard />
            </el-icon>
          </div>
          <div class="stat-content">
            <h3>银行卡查询</h3>
            <p>支持V1.0和V2.0两个版本的API</p>
            <el-button type="primary" @click="$router.push('/bank-query')">
              立即使用
            </el-button>
          </div>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="card-container stat-card">
          <div class="stat-icon">
            <el-icon size="48" color="#764ba2">
              <Message />
            </el-icon>
          </div>
          <div class="stat-content">
            <h3>邮件发送</h3>
            <p>支持生日邮件等模板发送</p>
            <el-button type="primary" @click="$router.push('/mail-send')">
              立即使用
            </el-button>
          </div>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="card-container stat-card">
          <div class="stat-icon">
            <el-icon size="48" color="#f093fb">
              <DataAnalysis />
            </el-icon>
          </div>
          <div class="stat-content">
            <h3>系统状态</h3>
            <p>服务运行正常</p>
            <el-tag type="success">在线</el-tag>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="card-container feature-section">
      <h2>功能特性</h2>
      <el-row :gutter="16">
        <el-col :span="12">
          <div class="feature-item">
            <el-icon size="24" color="#67C23A">
              <Check />
            </el-icon>
            <span>高性能API接口</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="feature-item">
            <el-icon size="24" color="#67C23A">
              <Check />
            </el-icon>
            <span>安全可靠的数据传输</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="feature-item">
            <el-icon size="24" color="#67C23A">
              <Check />
            </el-icon>
            <span>现代化的用户界面</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="feature-item">
            <el-icon size="24" color="#67C23A">
              <Check />
            </el-icon>
            <span>响应式设计</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
// Dashboard页面
</script>

<style scoped lang="scss">
.dashboard-header {
  text-align: center;
  margin-bottom: 40px;
  
  h1 {
    font-size: 2.5rem;
    margin-bottom: 16px;
    font-weight: 700;
  }
  
  .subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
  }
}

.stats-row {
  margin-bottom: 40px;
}

.stat-card {
  text-align: center;
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
  }
  
  .stat-icon {
    margin-bottom: 16px;
  }
  
  .stat-content {
    h3 {
      margin-bottom: 8px;
      color: #333;
    }
    
    p {
      color: #666;
      margin-bottom: 16px;
    }
  }
}

.feature-section {
  h2 {
    margin-bottom: 24px;
    color: #333;
  }
  
  .feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    
    span {
      margin-left: 12px;
      color: #333;
    }
  }
}
</style>